import React, { Component } from 'react'
// import style from "./main.module.css"; //引入css in js

// let typeObj = {
//     "Now": "正在",
//     "Done": "Done"
// }

export class Main extends Component {

    render() {
        const { list, del, change} = this.props
        let newArr = list.filter( item => item.state)
        return (
            <div className='main'>
                <h3>待办</h3>
                <ul className='todolist'>
                    {
                        list.length ?
                            list.map(item => {
                                return <li key={item.id}>
                                    <input 
                                    type="checkbox" 
                                    checked={item.state} //双向数据绑定复选框的状态
                                    onChange={() => {
                                        change(item.id)
                                    }}
                                    
                                    />
                                    <b>{item.title}</b>
                                    {item.state ? <button>已完成</button> : <button>未完成</button>
                                    }
                                    <span onClick={() => {
                                        del(item.id)
                                    }}>X</span>
                                </li>
                            }) : "暂无待办项"
                    }
                </ul>
                <p>已完成：{newArr.length}</p>
                <p>未完成：{list.length - newArr.length}</p>
            </div>
        )
    }
}

export default Main